<script lang="ts" setup></script>

<template>
  <div class="bg h-full box-border overflow-hidden">
    <div class="start-1"></div>
    <div class="start-2"></div>
    <div class="start-3"></div>
  </div>
</template>

<style scoped lang="scss">
$bgColor: #443d3d;
$startColor: #f0f0f0;
$startSize: 1px;

@function createShadow($n) {
  $shadow: "#{random(100)}vw #{random(100)}vh #fff";
  @for $i from 2 through $n {
    $shadow: "#{$shadow}, #{random(100)}vw #{random(100)}vh #fff";
  }
  @return unquote($shadow);
}
.bg {
  //   background-color: $bgColor;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

@for $i from 1 through 3 {
  $startNum: floor(calc(400 / $i));
  $time: floor(calc(80 / $i));
  .start-#{$i} {
    //   position: fixed;
    //   left: 0;
    //   top: 0;
    background: $startColor;
    width: $startSize * $i;
    height: $startSize * $i;
    border-radius: 50%;
    box-shadow: createShadow($startNum);
    animation: move #{$time}s linear infinite;
    &::after {
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh);
  }
}
</style>
